<template>
    <el-drawer v-model="show" :show-close="false" :size="580" class="payouts-drawer">
        <template #header>
            <div class="title-box">
                <custom-title title="选择提现账户" />
                <div class="is-link" @click="addAccount"><el-icon>
                        <Plus />
                    </el-icon>新增账号</div>
            </div>
        </template>
        <div class="balance">
            该账户余额
            <div class="balance-num">¥{{ formattedAmount(currentAccountData.usableMoney - currentAccountData.freezeMoney)
                }}</div>
            <div class="input-box">¥<input placeholder="请输入提现金额" v-model.number="form.withdrawalAmount" /></div>
        </div>
        <div class="select-account">请选择账户</div>
        <el-scrollbar max-height="calc(100vh - 350px)">
            <el-radio-group v-model="form.bankCardNo" :max="1">
                <div class="account-list">
                    <div class="account-list-item" v-for="item in bankCardList">
                        <div :class="{ card: true, active: true }">
                            <div class="account-head">
                                <div class="card-type">{{ item.bankName }}</div>
                                <div class="card-num">{{
                                    item.desensitization ? bankCardDesensitization(item.cardNo) : item.cardNo
                                }}
                                    <img class="icon" @click="emit('bankCardshow', item)"
                                        :src="item.desensitization ? Hide : Show" alt="">
                                </div>
                            </div>
                            <div class="account-info">
                                <span>账户类型</span>{{ bankType[item.accountType] }}
                            </div>
                            <div class="account-info">
                                <span>银行绑定手机号</span>{{ item.cardTel }}
                            </div>
                        </div>
                        <el-radio :value="item.cardNo" />
                    </div>
                </div>
            </el-radio-group>
        </el-scrollbar>
        <template #footer>
            <div class="drawer-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="comfirmWithdraw">提现</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, computed } from "vue";
import { formattedAmount, bankCardDesensitization } from "@/utils";
import { bankType } from "@/utils/config";
import { withdraw } from '@/apis/purse'
import { ElMessage } from "element-plus";
import Hide from "@/assets/images/hide.png";
import Show from "@/assets/images/show.png";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    currentAccountData: {
        type: Object,
        default: () => { }
    },
    bankCardList: {
        type: Array,
        default: () => []
    },
});
const form = ref({});
const emit = defineEmits(['update:modelValue', 'openBind', 'bankCardshow']);
const show = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});

/**打开添加银行账户弹窗 */
const addAccount = () => {
    emit('openBind')
}
const comfirmWithdraw = async () => {
    // 已签约
    const reg = /^[0-9]+(\.[0-9]{1,2})?$/;
    if (!form.value.withdrawalAmount) return ElMessage.error('请输入提现金额');
    if (!reg.test(form.value.withdrawalAmount)) return ElMessage.error('请输入正确的提现金额');
    if (form.value.withdrawalAmount > (props.currentAccountData.usableMoney - props.currentAccountData.freezeMoney)) return ElMessage.error('提现金额不能大于可用余额');
    if (!form.value.bankCardNo?.length) return ElMessage.error('请选择银行卡');
    const params = {
        memberId: props.currentAccountData.memberId,
        walletId: props.currentAccountData.walletId,
        withdrawalAmount: form.value.withdrawalAmount,
        bankCardNo: form.value.bankCardNo
    }
    try {
        await withdraw(params);
        ElMessage.success('提交成功');
        show.value = false;
    } catch (error) {
    }
}
</script>

<style lang="scss" scoped>
.drawer-footer {
    @include mixin.flex-center(start, center)
}

.title-box {
    @include mixin.flex-center(space-between, center);

    .is-link {
        @include mixin.flex-align;
        gap: 8px;
    }
}

.balance {
    background: #EEF1F4;
    display: grid;
    grid-template-columns: 1fr;
    height: 170px;
    justify-items: center;
    padding: 20px;
    box-sizing: border-box;

    .balance-num {
        font-size: 36px;
        font-family: Lato;
        font-weight: bold;
        color: #3D3D3D;

    }

    .input-box {
        width: 272px;
        height: 32px;
        background: white;
        padding: 0 20px;
        box-sizing: border-box;
        @include mixin.flex-align;

        input {
            outline: none;
            border: none;
            text-align: center;
            flex: 1;
        }
    }

}

.select-account {
    margin: 24px 0 10px;
}

::v-deep(.el-radio-group) {
    width: 100%;
    font-size: unset !important;
    line-height: unset !important;
}

.account-list {
    width: 100%;
    padding-top: 1px;

    .account-list-item {
        width: 100%;
        @include mixin.flex-center(space-between, center);
        gap: 18px;
        margin-bottom: 1%;
        padding-right: 2px;
        box-sizing: border-box;

        .card {
            border: $border;
            flex: 1;
            height: 100%;
            padding: 0 12px;
            box-sizing: border-box;

            >div {
                color: #3D3D3D;
                @include mixin.flex-center(space-between, center);
                line-height: 32px;
            }
        }

        .active {
            background: #F2F6FC;
        }

        .account-head {
            height: 42px;
            border-bottom: $border;

            .card-num {
                @include mixin.flex-center(space-between, center);
                gap: 6px;

                .icon {
                    width: 18px;
                }
            }
        }

        .account-info {
            font-size: 12px;

            span {
                color: #86909C;
            }
        }
    }
}
</style>
<style lang="scss">
.payouts-drawer {
    border-radius: 10px 0 0 10px;

    .el-drawer__footer {
        box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    }

    .el-drawer__header {
        margin-bottom: 0;
    }

    .el-drawer__body {
        overflow: hidden;
    }
}
</style>